<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>👀👀👀Follow Along Nav</title>
		<link
			rel="stylesheet"
			href="style.css" />
		<link
			rel="icon"
			href="https://fav.farm/🔥" />
	</head>
	<body>
		<nav>
			<ul class="menu">
				<li><a href="">Home</a></li>
				<li><a href="">Order Status</a></li>
				<li><a href="">Tweets</a></li>
				<li><a href="">Read Our History</a></li>
				<li><a href="">Contact Us</a></li>
			</ul>
		</nav>

		<div class="wrapper">
			<p>
				Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus
				necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!
			</p>
			<p>
				Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum
				<a href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.
			</p>
			<p>
				Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus
				<a href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.
			</p>
			<p>
				Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur
				eveniet sunt quam provident sapiente dicta neque quod.
			</p>
			<p>
				Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime
				<a href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!
			</p>
		</div>

		<script>
			// 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀

			let trigger = document.querySelectorAll('a');
			let hover = document.createElement('span');
			hover.classList.add('highlight');
			document.body.appendChild(hover);

			trigger.forEach((item) => {
				item.addEventListener('mouseenter', (e) => {
					let rect = item.getBoundingClientRect();
					let position = {
						width: rect.width,
						height: rect.height,
						top: rect.top + window.scrollY,
						left: rect.left + window.scrollX,
					};
					hover.style.width = position.width + 'px';
					hover.style.height = position.height + 'px';
					hover.style.transform = `translate(${position.left}px, ${position.top}px)`;
				});
			});
		</script>
	</body>
</html>
